//路由懒加载 
// 步骤一：通过 lazy(() => import(路径))的方式引入(import { lazy } from 'react')
// 步骤二：用 Suspense组件(import { Suspense } from 'react'),将注册路由时的Route包裹，并传入fallback={<加载组件 />}属性。加载组件必须是静态导入。
import { lazy } from 'react';
import { SwapOutlined, ApartmentOutlined } from '@ant-design/icons';
import TodoList from '../../src/pages/example/TodoList'
import GitHupUserSearch from '../../src/pages/example/GitHupUserSearch'
// import Counter from '../pages/example/Counter';
import Calculator from '../pages/example/Calculator';
import SimpleCounter from '../pages/example/SimpleCounter';
import CustomSetState from '../pages/example/CustomSetState';
import Hooks from '../pages/example/Hooks';
import Context from '../../src/pages/example/Context';
import MyPureComponent from '../../src/pages/example/MyPureComponent';
import RenderProps from '../../src/pages/example/RenderProps';
// import ErrorBoundary from '../../src/pages/example/ErrorBoundary';

const routeList = [
  {
    key: '/baseKnowledge',
    label: '基础知识',
    icon: <ApartmentOutlined />,
    children: [
      {
        key: '/baseKnowledge/setState',
        label: 'setState的两种用法',
        component: CustomSetState,
      },
      {
        key: '/baseKnowledge/hooks',
        label: '函数式组件hooks的使用',
        component: Hooks,
      },
      {
        key: '/baseKnowledge/pureComponent',
        label: 'PureComponent纯组件',
        component: MyPureComponent,
      },
      {
        key: '/baseKnowledge/renderProps',
        label: 'renderProps类似Vue插槽',
        component: RenderProps,
      },
      {
        key: '/baseKnowledge/ErrorBoundary',
        label: '错误边界',
        component: lazy(() => import('../../src/pages/example/ErrorBoundary')),
      }
    ]
  },
  {
    key: '/componentCommunication',
    label: '组件通信',
    icon: <SwapOutlined />,
    children: [
      {
        key: '/componentCommunication/todoList',
        label: '给子组件传回调函数',
        component: TodoList,
      },
      {
        key: '/componentCommunication/pubsubjs',
        label: 'pubsubJs 发布订阅模式',
        component: GitHupUserSearch,
      },
      {
        key: '/componentCommunication/redux',
        label: 'redux 集中状态管理',
        component: SimpleCounter,
      },
      {
        key: '/componentCommunication/react-redux',
        label: 'react-redux模型 + redux',
        component: Calculator,
      },
      {
        key: '/baseKnowledge/context',
        label: '子孙组件context通信',
        component: Context,
      }
    ]
  },
]
export const defaultRouteKey = routeList[0].children[0].key;

export default routeList;